<template>
    <div class="QuickEntranceDef">
        <a-form-model layout="vertical" :model="config">
            <a-collapse :activeKey="['1','2','3','4']" :bordered="false">
                <template #expandIcon="props">
                    <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0"/>
                </template>
                <a-collapse-panel key="1">
                    <span class="QuickEntranceDef-head" slot="header" @click.stop="">
                        <div style="flex: 1">{{$ti18("form.titleDisplay", "标题展示", "formComponent")}}</div>
                        <a-switch size="small" v-model="config.showName"></a-switch>
                    </span>
                    <a-form-model-item :label="$ti18('rxList.title', '标题')">
                        <a-input v-model="config.name"></a-input>
                    </a-form-model-item>
                    <div class="QuickEntranceDef-disposition">
                        <div>{{i18n("allowCustom","允许自定义")}}<a-switch style="margin-left: 10px" size="small" v-model="config.supportCustom"></a-switch></div>
                    </div>
                </a-collapse-panel>
                <a-collapse-panel key="2" >
                    <span class="QuickEntranceDef-head" slot="header" @click.stop="">
                        <div style="flex: 1">{{i18n('pictureSettings','配图设置')}}</div>
                        <a-switch size="small" v-model="config.showImg"></a-switch>
                    </span>
                    <a-form-model-item v-if="config.showImg" :label="i18n('type','类型')">
                        <a-select v-model="config.banner.type" :getPopupContainer="(p)=>p.parentNode">
                            <a-select-option value="system">{{i18n("systemDiagram","系统配图")}}</a-select-option>
                            <a-select-option value="custom">{{i18n("custom","自定义")}}</a-select-option>
                        </a-select>
                        <div class="QuickEntranceDef-image" v-if="config.banner.type =='system' && config.banner.systemImage">
                            <img @click="systemImg" :src="require('@/image/fastImg/'+config.banner.systemImage+'.png')"/>
                        </div>
                        <div v-else style="margin-top: 10px">
                            <a-upload-dragger
                                class=""
                                :file-list="fileList"
                                :customRequest="()=>{}"
                                :directory="false"
                                :showUploadList="false"
                                :before-upload="beforeUpload"
                            >
                                <div v-if="!config.banner.customImage" class="pageStyle-img-system-empty">
                                    <span>{{i18n("uploadPictures","上传图片")}}</span>
                                </div>
                                <p v-else>
                                    <img class="uploadCommon-img" :src="getFilePath(config.banner.customImage)" alt="photo"/>
                                </p>
                            </a-upload-dragger>
                        </div>
                    </a-form-model-item>
                </a-collapse-panel>
                <a-collapse-panel v-if="config.showImg" key="3" :header="i18n('pictureText','配图文字')">
                    <a-form-model-item :label="i18n('content','内容(建议不要超过16个字)')">
                        <a-textarea v-model="config.bannerText.text" :auto-size="{ minRows: 3, maxRows: 5 }" />
                    </a-form-model-item>
                    <a-row>
                        <a-col :span="8">
                            <a-form-model-item :label="i18n('fontSize','字体大小')">
                                <a-input-number style="width: 80%!important" v-model="config.bannerText.fontSize"  :min="12" :max="30"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item :label="i18n('fontColor','字体颜色')">
                                <a-input type="color" v-model="config.bannerText.fontColor" style="width: 80%"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item :label="i18n('fontWeight','字体粗细')">
                                <a-select v-model="config.bannerText.fontWeight" :getPopupContainer="(p)=>p.parentNode">
                                    <a-select-option value="bold">{{i18n('bold','加粗')}}</a-select-option>
                                    <a-select-option value="normal">{{i18n('normal','正常')}}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-form-model-item :label="i18n('entryNum','每行入口数')">
                        <a-input-number  v-model="config.lineNumber"  :min="1" :max="5"/>
                    </a-form-model-item>
                </a-collapse-panel>
                <a-collapse-panel key="4" :header="i18n('entryConfig','快捷入口配置')">
                    <div class="QuickEntranceDef-add"><a @click="add()"><my-icon type="iconaddition" style="margin-right: 5px;font-size: 20px"></my-icon>{{i18n('addEntry','添加快捷入口')}}</a></div>
                    <vuedraggable class="wrapper" v-model="config.items">
                        <transition-group>
                            <div v-for="(item, index) in config.items" :key="index" class="QuickEntranceDef-vuedraggable">
                                <my-icon type="icondrag"></my-icon>
                                <my-icon @click="del(index)" type="iconoffline"></my-icon>
                                <div class="QuickEntranceDef-vuedraggable-icon" :style="{'background':item.background.color}">
                                    <my-icon :type="getIcon(item)"></my-icon>
                                </div>
                                <div class="QuickEntranceDef-vuedraggable-name">{{item.name}}</div>
                                <my-icon @click="edit(index)" type="iconsetup_fill"></my-icon>
                            </div>
                        </transition-group>
                    </vuedraggable>
                </a-collapse-panel>
            </a-collapse>
        </a-form-model>
    </div>
</template>

<script>
import ComponentDef from "@/views/modules/form/core/formComponent/ComponentDef";
import {RxInputButton,Util,TokenUtil} from "@lowcode/jpaas-common-lib"
import QuickEntranceDialog from "@/views/modules/form/core/dialog/QuickEntranceDialog.vue"
import { cloneDeep } from 'lodash-es'
import systemImage from './systemImage'
import vuedraggable from 'rx-vuedraggable';
import FormApi from "@/views/modules/form/core/js-comps/api/FormApi";

export default {
    name: "QuickEntranceDef",
    mixins: [ComponentDef],
    components: {
        RxInputButton,
        vuedraggable
    },
    props: {},
    data() {
        return {
            config: {
                alias: Util.randomId(),
                name: this.i18n("CommonEntry",'常用入口'),
                showName:true,
                supportCustom:false,//允许用户自定义
                showImg:true,//是否展示配图
                //配图
                banner:{
                    //系统，自定义
                    type:"system",
                    //配置文件名或ID
                    setting:"",
                    systemImage:"1",
                    customImage:'',
                },
                lineNumber:5,
                bannerText:{
                    //配置的文字
                    text: this.i18n("description","请在此处输入配图描述文字"),
                    fontColor:"#000000",
                    fontSize:24,
                    fontWeight:"bold"
                },
                /**
                 * 入口配置项
                 *  {
                        //入口类型：菜单menu 链接link
                        type:"menu",
                        name:"菜单名/链接名称",
                        key:"菜单id/url",
                        background:{
                            type:"system",//系统，自定义
                            color:"",
                            icon:"",
                        }
                    }
                 */
                items:[],
                fileList:[]
            }
        }
    },
    created(){
        if(this.conf){
            this.config=cloneDeep(this.conf)
        }
        if(!this.config.lineNumber){
            this.config['lineNumber'] = 5;//默认5个
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formComponent.quickEntra", key);
        },
        add(items){
            let self=this;
            let conf = {
                component: QuickEntranceDialog,
                title: this.i18n("addEntry","添加快捷入口"),
                widthHeight: ['810px', '600px'],
                curVm: this,
                zIndex:9999
            };
            if(items){
                //编辑
                conf['data'] = {
                    config:items
                }
            }
            Util.open(conf, function (action,data) {
                if (action != "ok") {return;}
                let show = false;
                self.config.items.filter((obj,index)=>{
                    if(obj.id==data.id){
                        self.config.items[index] = data;
                        show = true
                        return
                    }
                })
                self.$forceUpdate()
                if(show){
                    return;
                }
                self.config.items.push(data)
            });
        },
        del(index){
            this.config.items.splice(index,1);
        },
        configChange:Util.debounce(function (data){
            this.$emit('dragclick', this.config, this.index, this.type);
        },500),
        systemImg(){
            let self = this;
            let conf = {
                curVm: this,
                component: systemImage,
                title:this.i18n("background",'选择背景'),
                widthHeight:['800px','500px'],
                zIndex:9999,
                data: {
                    config:self.config
                }
            };
            Util.open(conf, function (action,data) {
                if (action != 'ok') return;
                self.config.banner.systemImage = data;
            });
        },
        edit(index){
            this.add(this.config.items[index])
        },
        getFilePath(fileId){
            let token = TokenUtil.getToken();
            fileId=Util.encryptWord(fileId);
            return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
        },
        beforeUpload(file) {
            this.fileList = [file];
            let timestamp = new Date().getTime();
            let formdata = new FormData();
            formdata.append('files', file);
            formdata.append("time", Util.encryptWord(timestamp,true));
            let self = this;
            FormApi.upload(formdata).then(res => {
                self.config.banner.customImage = res.data[0].fileId;
                self.$forceUpdate();
            })

        },
        getIcon(item){
            let icon="";
            try {
                icon=JSON.parse(item.background.icon).icon
            }catch (e){
                icon=item.background.icon;
            }
            return icon;
        }
    },
    watch: {
        config:{
            handler:function (o,ol){
                this.configChange();
            },
            deep:true
        }
    },
}
</script>

<style scoped>
.QuickEntranceDef-head{
    display: flex;
    height: 20px;
    align-items: center;
}
.QuickEntranceDef>>>.ant-form-item{
    margin-bottom: 0px;
}
.QuickEntranceDef-disposition{
    display: flex;
    height: 40px;
    align-items: center;
}
.QuickEntranceDef-disposition>div{
    flex: 1;
}
.QuickEntranceDef-image{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 10px 0px;
    padding: 10px;
    border-radius: 4px;
    border: solid 1px #d4dae8;
    cursor: pointer;
}
.QuickEntranceDef-add{
    display: flex;
    font-size: 16px;
    margin-top: -5px;
    margin-left: 30px;
}
.QuickEntranceDef-vuedraggable{
    display: flex;
    cursor: pointer;
    border-bottom: 1px dashed #dedede;
    height: 40px;
    align-items: center;
}
.QuickEntranceDef-vuedraggable i{
    font-size: 20px;
    margin-right: 10px;
}
.QuickEntranceDef-vuedraggable-name{
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 14px;
    font-weight: bold;
    flex: 1;
    margin-right: 10px;
}
.QuickEntranceDef-vuedraggable-icon{
    width: 30px;
    height: 30px;
    background-color: #4285f4;
    border-radius: 6px;
    margin-right: 10px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.QuickEntranceDef-vuedraggable-icon i{
    margin-right: 0px!important;
    font-size: 25px!important;
}
.pageStyle-img-system-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
    cursor: pointer;
}
.uploadCommon-img{
    width: 485px;
    margin: auto;
    height: 120px;
    object-fit: cover;
}
</style>